<template>
	<view>
		<u-navbar   title="" title-color="#F09238">
			<view class="slot-wrap" >
				<view @click="up" class="btn">发布</view>
			</view>
		</u-navbar>
		<view class="content">
			<view class="textbox">
				<textarea maxlength="-1" placeholder="写点什么吧 . . ." class="text" v-model="text"></textarea>
			</view>
			<view class="imgbox">
				<view class="box" v-for="(item,index) in imglist">
					<image :src="item" mode="aspectFill" class="img" ></image>
					<view class="delbox" @click="del(index)">
						<u-icon name="trash" color="#fff" size="30"></u-icon>
					</view>
				</view>
				<view class="addimg" @click="upImg" v-if="imglist.length<9">
					<u-icon name="camera" color="#999" size="100"></u-icon>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import{fbpyq}from"../../api/user.js"
	export default{
		data(){
			return{
				text:'',
				imglist:[]
			}
		},
		methods:{
			upImg(){
				let num=9-this.imglist.length
				this.upimgs((res)=>{
					console.log(res)
					this.imglist.push(res)
				},num)
			},
			async up(){
				if(this.imglist.length==0&&this.text.trim()==""){
					this.msg('发布内容不能为空',"none")
				}else{
					uni.showLoading({
						title:"发布中..."
					})
					let res=await this.post(fbpyq,{
						articleContent:this.text,
						imageUrl:this.imglist.join(',')
					})
					this.msg('发布成功')
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1000)
				}
				
			},
			del(index){
				this.imglist.splice(index,1)
			}
		}
	}
</script>

<style>
	.btn{
		width: 88rpx;
		height: 50rpx;
		background-color: #E6852C;
		border-radius: 10rpx;
		color: #FFFfff;
		line-height: 50rpx;
		text-align: center;
	}
	.slot-wrap {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;
		box-sizing: border-box;
		padding-right: 30rpx;
	}
	.delbox{
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		background-color: rgba(0,0,0,0.5);
		position: absolute;
		top: -20rpx;
		right:-10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.imgbox{
		width: 690rpx;
		margin-left: 30rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.addimg{
		width: 210rpx;
		height:210rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px #999999 solid;
		margin: 10rpx;
	}
	.box{
		position: relative;
		margin: 10rpx;
	}
	.img{
		width: 210rpx;
		height:210rpx;
	}
	.text {
		width: 670rpx;
		height: 300rpx;
	}

	.textbox {
		width: 750rpx;
		padding: 10rpx 40rpx;
		box-sizing: border-box;
		height: 300rpx;
		margin-bottom: 30rpx;
	}
</style>
